<template>
  <div style="margin: 20px 80px 0px 170px;">
    <br><br>
    <el-button style="position: absolute;top:16%;left: 10%" @click="$router.back()">返回</el-button>
    <el-form ref="goodsAdminsForm"  label-width="80px" :model="goodsAdminsForm">
      <img  :src="goodsAdminsForm.imghref">
      <span style="margin: 20px 80px 0px 170px;position: absolute;top: 20%;left:30%;font-size: 40px;font-weight: bold;">{{goodsAdminsForm.goodname}}</span>
      <span style="font-size: 25px;position: absolute;top: 45%;left: 40%">尺寸：{{goodsAdminsForm.size}}</span>
      <span style="color: red;font-size: 50px;font-weight: bold;position: absolute;top:55%;left: 40%">￥{{goodsAdminsForm.price}}</span>

      <div style="position:absolute;left: 38%;top: 70%">
        <el-button class="buttonbuy" type="warning" plain @click="onBuy">添加购物车</el-button>
        <el-button class="buttonbuy" @click="onStar">收藏</el-button>
      </div>
      <br>
      <br>
      <div class="policy">
        <ul>
          <li><i class="el-icon-circle-check"></i>商城自营</li>
          <li><i class="el-icon-circle-check"></i>极速发货</li>
          <li><i class="el-icon-circle-check"></i>七天无理由退货</li>
          <li><i class="el-icon-circle-check"></i>七天价格保护</li>
        </ul>
      </div>
    </el-form>
    <br><br>
  </div>
</template>

<script>
import allGoodsApi from "@/http/allGoodsApi";

export default {
  name: "AllGoodsEdit",
  data(){
    return {
      goodsAdminsForm: {},
    }

  },
  created() {
    this.getEditObj();
    let id = this.$route.params.id;
    this.$store.dispatch('GET_SHOPPINGDATA_ACTIONS', id);
  },
  methods:{
    getEditObj() {
      let id = this.$route.params.id;
      console.log("id是："+id);
      if (id) {
        allGoodsApi.edit(id).then(res => {
          if (res.data.code == 200) {
            this.goodsAdminsForm = res.data.data;
          }
        })
      }
    },
    onBuy(){
      allGoodsApi.buy(this.$store.state.shoppingdata).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.$router.replace("/allGoods.html")
          this.$message.success(res.data.msg);
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
      })
      console.log(this.$store.state.shoppingdata);
    },
    onStar(){
      allGoodsApi.star(this.$store.state.shoppingdata).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.$router.replace("/allGoods.html")
          this.$message.success(res.data.msg);
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
      })
      console.log(this.$store.state.shoppingdata);
    },
    }
}
</script>

<style scoped>
.buttonbuy{
  width:460px;
  height: 50px;
  font-size: 20px;
}
.policy li{
  float: left;
  color: #b0b0b0;
  list-style: none;
  margin: 20px -10px 20px 170px;
}
</style>
